/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div class="system_c">
    <div class="warpper_title">管理中心</div>
    <div class="system_main">
      <el-row :gutter="24">
        <el-col :span="11">
          <div class="mb20 flex">
            <div class="main_left nflex number1">
              <div class="main_item">
                <div class="main_item1">
                  <div class="mb10 font30">
                    {{order_report_today.order_count}}
                    <span class="font14">(个)</span>
                  </div>
                  <div class="font14">今日新增订单数</div>
                </div>
                <div>
                  <img src="@/static/images/1.png" alt />
                </div>
              </div>
            </div>
            <div class="main_left ml20 nflex number2">
              <div class="main_item">
                <div class="main_item1">
                  <div class="mb10 font30">
                    {{user_report.today_count}}
                    <span class="font14">(位)</span>
                  </div>
                  <div class="font14">今日新增会员数</div>
                </div>
                <div>
                  <img src="@/static/images/2.png" alt />
                </div>
              </div>
            </div>
          </div>
          <div class="mb20" style="display:flex;">
            <div class="main_left nflex number3">
              <div class="main_item">
                <div class="main_item1">
                  <div class="mb10 font30">
                    {{wait_comment_count}}
                    <span class="font14">(条)</span>
                  </div>
                  <div class="font14">今日待审评论数</div>
                </div>
                <div>
                  <img src="@/static/images/3.png" alt />
                </div>
              </div>
            </div>
            <div class="main_left ml20 nflex number4">
              <div class="main_item">
                <div class="main_item1">
                  <div class="mb10 font30">
                    {{user_report.today_login}}
                    <span class="font14">(次)</span>
                  </div>
                  <div class="font14">今日访问量</div>
                </div>
                <div>
                  <img src="@/static/images/4.png" alt />
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="13">
          <div class="section_right flex">
            <router-link class="section_item" :to="{name:'store_applys'}">
              <img class="mb10" src="@/static/images/cont2-icon0101.png" alt />
              <div class="mb10">开店审核</div>
              <div class="font_weight font28">{{wait_store_apply_count}}</div>
            </router-link>
            <router-link class="section_item" :to="{name:'brands'}">
              <img class="mb10" src="@/static/images/cont2-icon0301.png" alt />
              <div class="mb10">品牌申请</div>
              <div class="font_weight font28">{{wait_brand_count}}</div>
            </router-link>
            <router-link class="section_item" :to="{name:'goods'}">
              <img class="mb10" src="@/static/images/cont2-icon0401.png" alt />
              <div class="mb10">商品数量</div>
              <div class="font_weight font28">{{goods_report.total_count}}</div>
            </router-link>
            <router-link class="section_item" :to="{name:'article_list'}">
              <img class="mb10" src="@/static/images/cont2-icon0501.png" alt />
              <div class="mb10">文章数量</div>
              <div class="font_weight font28">{{article_count}}</div>
            </router-link>
            <router-link class="section_item" :to="{name:'members'}">
              <img class="mb10" src="@/static/images/cont2-icon0601.png" alt />
              <div class="mb10">会员总数</div>
              <div class="font_weight font28">{{user_report.total_count}}</div>
            </router-link>
          </div>
          <div class="members" style="height:180px">
            <div class="sc_title" style="padding: 15px 0;">
              <i class="sc_icon"></i>
              <h3>个人会员信息</h3>
              <p>单位（位）</p>
            </div>
            <div class="sc_warp">
              <div>
                <p>{{user_report.today_count}}</p>
                <p>今日新增</p>
              </div>
              <div>
                <p>{{user_report.yesterday_count}}</p>
                <p>昨日新增</p>
              </div>
              <div>
                <p>{{user_report.month_count}}</p>
                <p>本月新增</p>
              </div>
              <div>
                <p>{{user_report.total_count}}</p>
                <p>会员总数</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <div style="width: 100%;display: flex;position:relative;" v-if="list">
        <div class="statistics list1" style="width:49%;">
          <div class="c_title">
            <i class="sc_icon"></i>
            <h3>订单统计</h3>
          </div>
          <v-chart :options="order_polar" theme="macarons" />
        </div>

        <div class="statistics list2" style="width:49%;">
          <div class="c_title">
            <i class="sc_icon"></i>
            <h3>销售统计</h3>
          </div>
          <v-chart :options="sale_polar" theme="macarons" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getOrderReportDay,
  getUserReport,
  getCommentCount,
  getStoreApplyCount,
  getBrandCount,
  getGoodsReport,
  getArticleCount
} from "@/utils/api";

import ECharts from "vue-echarts";
import "echarts/theme/macarons.js";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/polar";
import "echarts/lib/component/legend";
export default {
  data() {
    return {
      order_report_today: {
        order_count: 0
      },
      user_report: {},
      wait_comment_count: 0,
      wait_store_apply_count: 0,
      wait_brand_count: 0,
      goods_report: {
        total_count: 0
      },
      article_count: 0,
      now_zero_time: parseInt(
        new Date(new Date().toLocaleDateString()).getTime() / 1000
      ),
      now_time: parseInt(new Date().getTime() / 1000),

      query: {},
      order_polar: {
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: []
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            data: [],
            symbol: "circle", //设定为实心点
            symbolSize: 10, //设定实心点的大小
            lineStyle: {
              normal: {
                color: "#3B8CFF",
                width: 3
              }
            },
            itemStyle: {
              normal: {
                color: "#3B8CFF"
              }
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值"
                },
                {
                  type: "min",
                  name: "最小值"
                }
              ]
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ]
            }
          }
        ]
      },

      sale_polar: {
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: []
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            data: [],
            symbol: "circle", //设定为实心点
            symbolSize: 10, //设定实心点的大小
            lineStyle: {
              normal: {
                color: "#3B8CFF",
                width: 3
              }
            },
            itemStyle: {
              normal: {
                color: "#3B8CFF"
              }
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值"
                },
                {
                  type: "min",
                  name: "最小值"
                }
              ]
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ]
            }
          }
        ]
      },
      list: null
    };
  },
  components: {
    "v-chart": ECharts
  },
  created() {
    this.getTodayReport();
    this.getUserReport();
    this.getCommentCount();
    this.getStoreApplyCount();
    this.getBrandCount();
    this.getGoodsReport();
    this.getArticleCount();
    this.getOrderReport();
  },
  methods: {
    getOrderReport() {
      var that = this;
      this.query.start_time = that.now_zero_time - 6 * 60 * 60 * 24;
      this.query.end_time = that.now_zero_time + 60 * 60 * 24 - 1;
      getOrderReportDay(that.query).then(function(res) {
        that.list = res;
        that.order_polar.xAxis[0].data = [];
        that.sale_polar.xAxis[0].data = [];
        that.order_polar.series[0].data = [];
        that.sale_polar.series[0].data = [];
        if (res.length > 0) {
          res.forEach(element => {
            that.order_polar.xAxis[0].data.unshift(element.days);
            that.sale_polar.xAxis[0].data.unshift(element.days);
            that.order_polar.series[0].data.unshift(element.order_count);
            element.order_amount =
              element.total_amount - element.shipping_price;
            that.sale_polar.series[0].data.unshift(element.order_amount);
          });
        }
      });
    },
    getTodayReport() {
      var that = this;
      var start_time = parseInt(
        new Date(new Date().toLocaleDateString()).getTime() / 1000
      );
      var end_time = parseInt(new Date().getTime() / 1000);
      getOrderReportDay({
        start_time: start_time,
        end_time: end_time
      }).then(function(res) {
        if (res.length > 0) {
          that.order_report_today = res[0];
        }
      });
    },
    getUserReport() {
      var that = this;
      getUserReport().then(function(res) {
        that.user_report = res;
      });
    },
    getCommentCount() {
      var that = this;
      getCommentCount({
        is_show: 0,
        add_time_start: this.now_zero_time,
        add_time_end: this.now_time
      }).then(function(res) {
        that.wait_comment_count = res;
      });
    },
    getStoreApplyCount() {
      var that = this;
      getStoreApplyCount({
        apply_state: 0
      }).then(function(res) {
        that.wait_store_apply_count = res;
      });
    },
    getBrandCount() {
      var that = this;
      getBrandCount({
        status: 1
      }).then(function(res) {
        that.wait_brand_count = res;
      });
    },
    getGoodsReport() {
      var that = this;
      getGoodsReport({}).then(function(res) {
        that.goods_report = res;
      });
    },
    getArticleCount() {
      var that = this;
      getArticleCount({}).then(function(res) {
        that.article_count = res;
      });
    }
  }
};
</script>

<style scoped>
.ww100 {
  width: 50%;
}
.ww50 {
  width: 50%;
}
.font30 {
  font-size: 30px;
}
.font28 {
  font-size: 28px;
}
.font14 {
  font-size: 14px;
}
.flex {
  display: flex;
}
.nflex {
  display: flex;
  align-items: center;
}
.font_weight {
  font-weight: 600;
}
.mb20 {
  margin-bottom: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
.ml20 {
  margin-left: 20px;
}

>>> .echarts {
  width: 100%;
  height: 300px;
}
.mainbox {
  overflow-x: hidden;
}
.warpper_title {
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #e4eaec;
  font-size: 24px;
  color: #202020;
  font-weight: 600;
  padding: 0 20px;
}
.system_c {
  padding-bottom: 100px;
}
.system_c .system_main {
  padding: 20px 15px 20px 18px;
}
.system_c .main_left {
  width: calc(50% - 10px);
  height: 180px;
  border-radius: 5px;
  color: #fff;
}
.system_c .main_left .main_item {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.system_c .main_left .main_item1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.system_c .main_left.number1 {
  background: #8693f3;
}
.system_c .main_left.number2 {
  background: #66a6ff;
}
.system_c .main_left.number3 {
  background: #00b7ee;
}
.system_c .main_left.number4 {
  background: #3dcc85;
}
.system_c .members {
  margin: 16px 0;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  border: solid 1px #f5f5f5;
}
.system_c .members .sc_title {
  padding: 15px 0;
  border-bottom: 1px solid #e4eaec;
  position: relative;
}
.system_c .members .sc_icon {
  display: block;
  position: absolute;
  width: 4px;
  height: 24px;
  background-color: #3388ff;
  background-image: none;
}
.system_c .members .sc_title h3 {
  float: left;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  line-height: 20px;
  padding-left: 16px;
}
.system_c .members .sc_title p {
  float: right;
  font-size: 14px;
  color: #999;
  padding-right: 30px;
}
.system_c .members .sc_title::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.system_c .members .sc_warp {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 127px;
  padding: 0 50px;
}
.system_c .members .sc_warp div {
  height: 66px;
  line-height: 30px;
  text-align: center;
}
.system_c .members .sc_warp div p:nth-child(1) {
  font-size: 28px;
  color: #333;
  font-weight: 600;
}
.system_c .members .sc_warp div p:nth-child(2) {
  font-size: 14px;
  color: #666;
  line-height: 50px;
}
.section_right {
}
.section_right .section_item {
  width: 18%;
  height: 150px;
  margin-right: 2.5%;
  padding: 15px 0;
  background: #fff;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  border: solid 1px #f5f5f5;
}
.section_item:hover {
  background-color: #c1c6c9;
}
.section_right .section_item:nth-child(5) {
  margin-right: 0;
}
.statistics {
  position: relative;
  background-color: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  border: solid 1px #f5f5f5;
  padding-top: 10px;
}
.statistics .c_title {
  position: absolute;
  top: 0;
  width: 100%;
  height: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #eef1f2;
}
.statistics .sc_title:before {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.statistics .c_title i {
  display: block;
  position: absolute;
  width: 4px;
  height: 24px;
  background-color: #3388ff;
  background-image: none;
}
.statistics .c_title h3 {
  float: left;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  line-height: 20px;
  padding-left: 16px;
}
.statistics.list1 {
  width: 49%;
  margin-right: 2%;
}
.statistics.list2 {
  width: 49%;
}
</style>
